require("../less/run.less");
require("../lib/iconfont/iconfont.css");
document.ready(function () {
    let userId = window.$utils.istongguo();
    window.$utils.getfoot("sport");
    window.$utils.getheader("Cycling");
    let startRunTime10 = document.querySelector("#startRunTime10");
    let startRunTime1 = document.querySelector("#startRunTime1");
    let locRunMap = document.querySelector("#locRunMap")
    let clickFanhui = document.querySelector(".click-fanhui");
    let runShuju = document.querySelector("#runShuju")
    let clickWancheng = document.querySelector("#clickWancheng")
    let runEnd = document.querySelector("#runEnd")
    let specificDate = document.querySelector("#specificDate");
    let rec = 0;
    /* 渲染年月日 */
    let data = new Date();
    let year = data.getFullYear();
    let yue = data.getMonth()+1;
    let ri = data.getDate();
    let arr = [year, $utils.getzero(yue), $utils.getzero(ri)].join("-")
    specificDate.textContent = arr;
    let stopTime = '';
    /* 点击go跳出模态框 */
    document.querySelector(".go").addEventListener("click", function () {
        document.querySelector(".motai").style.display = 'block'
        let num = 3;
        let timeout = setInterval(function () {
            num--;
            document.querySelector(".daojishi").textContent = num;
            if (num === 0) {
                clearInterval(timeout);
                document.querySelector(".daojishi").textContent = 'GO';
                setTimeout(function () {
                    document.querySelector(".main123").style.display = "block";
                    /* 将动态的数据渲染上去 */
                    stopTime = setInterval(function () {
                        rec++
                        let s = Math.floor(rec / 60 / 60 % 24)
                        let f = Math.floor(rec / 60 % 60);
                        let m = Math.floor(rec % 60);

                        startRunTime10.innerHTML = [window.$utils.getzero(s), window.$utils.getzero(f), window.$utils.getzero(m)].join(":");
                        startRunTime1.innerHTML = [window.$utils.getzero(s), window.$utils.getzero(f), window.$utils.getzero(m)].join(":");
                        getmap2();
                    }, 1000)
                }, 1000)

            }
        }, 1000)
    })
    /* 点击刷新页面 */
    clickWancheng.addEventListener("click", function () {
        /* 获取 配速*/
        let animaObj = {
            id: userId,
            type: 2,
            takeTime:runtime ,
            averagerate: distance /runtime,
            calorie: calCalorie,
            miles: distance,
        }
        window.$http.post("/sports/save", animaObj, function (res) {
            if(res.status === 0){
                window.$utils.tips(`恭喜你跑了${res.distance}公里`,"😁",2000);
                setTimeout(function(){
                    window.history.go(0);
                },2000)
              
            }
        })
    })
    /*定义的全局变量 */
    let larr = [];
    var map = new BMap.Map("runMap");
    let distance = 0//计算距离
    let calcPace = 0;  //计算速度
    let runtime = 0;//时间长度
    let itmeId = null  //定时函数
    let calCalorie = 0  //计算卡路里
    function getmap2() {
        /* 地图 创建实例 */// 创建地图实例 
        // 创建点坐标 
        /*     var point = new BMap.Point(116.331398, 39.897445);
            // 初始化地图，设置中心点坐标和地图级别 
            map.centerAndZoom(point, 12); */
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                let latitude = r.latitude;
                let longitude = r.longitude;
                runtime++
                larr.push({ lat: latitude, lng: longitude })
                if (larr.length > 1) {
                    getll(larr[larr.length - 2], larr[larr.length - 1])
                    console.log(larr[0], larr[larr.length - 1]);
                    /* 获取起点到终点的距离 */
                    distance = window.$utils.calcDistance(larr[0], larr[larr.length - 1])/* 获取 */
                    calcPace = window.$utils.calcPace(distance, runtime)/* 获取 配速*/
                    calCalorie = window.$utils.calCalorie(distance)/* 获取卡路里 */
                    console.log(document.querySelectorAll(".lucheng"))
                    document.querySelectorAll(".lucheng")[0].textContent = distance;
                    document.querySelectorAll(".lucheng")[1].textContent = distance;
                    document.querySelectorAll(".lucheng")[2].textContent = distance;
                    document.querySelector(".peisu").textContent = calcPace;
                    document.querySelector(".kaluli").textContent = calCalorie;
                }
                var point = new BMap.Point(longitude,latitude);
                // 初始化地图，设置中心点坐标和地图级别 
                map.centerAndZoom(point, 12);
            }
            else {
                alert('failed' + this.getStatus());
            }
        });
    }
    function getll(x, y) {
        var polyline = new BMap.Polyline([
            new BMap.Point(x.lng, x.lat),
            new BMap.Point(y.lng, y.lat)
        ],
            { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 }
        );
        map.addOverlay(polyline);
    }

    /* 进入跑步开始算时间 */

    /* 点击暂停 */
    let linglei = document.querySelector(".yincang");
    document.querySelector("#clickBtn").addEventListener("click", function () {
        linglei.style.display = "block";
        this.style.display = "none"
        clearInterval(stopTime)
        getmap2()
    })
    /* 点击继续 */
    document.querySelector("#linglei").addEventListener("click", function () {
        linglei.style.display = 'none';
        document.querySelector("#clickBtn").style.display = "block"
        stopTime = setInterval(function () {
            rec++
            let s = Math.floor(rec / 60 / 60 % 24)
            let f = Math.floor(rec / 60 % 60);
            let m = Math.floor(rec % 60);
            console.log([window.$utils.getzero(s), window.$utils.getzero(f), window.$utils.getzero(m)].join(":"))
            startRunTime10.innerHTML = [window.$utils.getzero(s), window.$utils.getzero(f), window.$utils.getzero(m)].join(":");
            startRunTime1.innerHTML = [window.$utils.getzero(s), window.$utils.getzero(f), window.$utils.getzero(m)].join(":");
        }, 1000)
        getmap2()

    })
    /* 点击跳转到第三个页面 */
    locRunMap.addEventListener("click", function () {
        document.querySelector("#runMap").style.display = "block";
        clickFanhui.style.display = "block";
        runShuju.style.display = "block";
        getmap2()

    })
    /* 点击返回 */
    clickFanhui.addEventListener("click", function () {
        document.querySelector("#runMap").style.display = "none";
        clickFanhui.style.display = "none";
        runShuju.style.display = "none";
    })
    /* 点击结束跳转的页面 */
    runEnd.addEventListener("click", function () {
        document.querySelector("#runMap").style.display = "block";
        runShuju.style.display = "block";
        clickWancheng.style.display = "block"
        getmap2()
    })
    getmap1();
    function getmap1() {
        /* 地图 创建实例 */// 创建地图实例 
        var map = new BMap.Map("bgtMap");
        // 创建点坐标 
        /*     var point = new BMap.Point(116.331398, 39.897445);
            // 初始化地图，设置中心点坐标和地图级别 
            map.centerAndZoom(point, 12); */
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                var point = new BMap.Point(r.point.lng, r.point.lat);
                // 初始化地图，设置中心点坐标和地图级别 
                map.centerAndZoom(point, 12);
                console.log(r)
                map.addOverlay(mk);
                map.panTo(r.point);
            }
            else {
                alert('failed' + this.getStatus());
            }
        });
    }
    /* 接口 */
    window.$http.get("/sports/exerciseData?id=" + userId, function (res) {

        document.querySelector("#zongLuCheng").textContent = Math.floor(res.data.ridekm)
    })
/* 点击完成   */


});
